<script setup>
import { toRefs, ref } from "vue";
import { robotTypes } from "../utils/index.js";
import { robotFaultInfo } from "@/api/inspection/robot-list";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  activeRobot: {
    type: Number,
    default: 0,
  },
  activeName: {
    type: String,
    default: robotTypes.OUTSIDE,
  },
});

const { activeRobot } = toRefs(props);

/**
 * @description: 是否离线
 * @param {*} status 状态
 * @return {*}
 */
function isOffline(status) {
  return status === "离线";
}

/**
 * @description: 当前选中的机器人
 * @param {*} id
 * @return {*}
 */
function isActiveRobot(id) {
  return id === activeRobot.value;
}

const emit = defineEmits(["open", "enter", "select", "update:activeName"]);

/**
 * @description: 打开起点定位
 * @return {*}
 */
function openStartPointPositionDialog(code) {
  emit("open", code);
}

function enterControl(code, type) {
  emit("enter", code, type);
}

function selectActiveRobot(id, code) {
  emit("select", id, code);
}

function handleTabChange(tabName) {
  emit("update:activeName", tabName);
}

// 机器人状态配置
const robotStatusOptions = [
  { prop: "navStatus", name: "导航状态" },
  { prop: "wheelStatus", name: "运动系统状态" },
  { prop: "controlBoxCode", name: "火焰传感器问题" },
  { prop: "flameSensorCode", name: "热感相机问题" },
  { prop: "hitSensorCode", name: "碰撞传感器问题" },
  { prop: "humidCode", name: "湿度传感器问题" },
  { prop: "noiseCode", name: "噪声传感器问题" },
  { prop: "pm10Code", name: "PM10问题" },
  { prop: "pm25Code", name: "PM2.5问题" },
  { prop: "radarCode", name: "雷达问题" },
  { prop: "tempCode", name: "温度传感器问题" },
  { prop: "mileage", name: "里程计问题" },
];

// 机器人状态弹窗显示
const robotStatusVisible = ref(false);

// 机器人状态数据
const robotStatusData = ref({});

// 显示机器人状态
async function showRobotStatus(code) {
  robotStatusVisible.value = true;
  const { data = {} } = await robotFaultInfo(code);
  robotStatusData.value = data;
}

// 格式化机器人状态数据
function formatStatusData(prop, val) {
  switch (prop) {
    case "navStatus":
      if (val === 0 || val === 1) return "导航故障";
      if (val === 2) return "导航待机";
      if (val === 3) return "导航中";
      if (val === 4) return "遥控模式";
      break;
    case "wheelStatus":
      if (val === 1) return "正常";
      return "异常";
    default:
      return val ? "异常" : "正常";
  }
}
</script>

<template>
  <div class="h-full bg-[#162331] px-5">
    <el-dialog v-model="robotStatusVisible" title="机器人状态">
      <el-descriptions border :column="2">
        <el-descriptions-item
          v-for="item in robotStatusOptions"
          :key="item.prop"
          :label="item.name"
          align="center"
        >
          {{ formatStatusData(item.prop, robotStatusData[item.prop]) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-tabs :model-value="activeName" @tab-change="handleTabChange">
      <!-- 室外 -->
      <el-tab-pane class="!text-white" label="室外" :name="robotTypes.OUTSIDE">
        <template v-for="item in list" :key="item.id">
          <el-popover placement="right" trigger="contextmenu">
            <div class="flex flex-col gap-2">
              <el-button @click="openStartPointPositionDialog(item.code)">
                位置校准
              </el-button>
              <el-button @click="showRobotStatus(item.code)">
                机器人状态
              </el-button>
              <el-button @click="enterControl(item.code)">进入操控端</el-button>
            </div>
            <template #reference>
              <div
                class="text-white cursor-pointer select-none p-3 bg-[#37424e] rounded text-sm font-bold flex justify-between mb-4"
                :class="{
                  '!bg-[#007EBF]': isActiveRobot(item.id),
                }"
                data-test="inspection-robot-item"
                @click="selectActiveRobot(item.id, item.code)"
              >
                <div>{{ item.code }}</div>
                <div class="flex items-center">
                  <span
                    class="inline-block w-2 h-2 rounded-full mr-2"
                    :class="[
                      isOffline(item.status) ? 'bg-[#5E6867]' : 'bg-[#20FEA5]',
                    ]"
                  ></span>
                  <span>{{ item.status }}</span>
                </div>
              </div>
            </template>
          </el-popover>
        </template>
      </el-tab-pane>
      <!-- 室内 -->
      <el-tab-pane class="!text-white" label="室内" :name="robotTypes.INSIDE">
        <template v-for="item in list" :key="item.id">
          <el-popover placement="right" trigger="contextmenu">
            <template #default>
              <el-button
                class="w-full mb-2"
                @click="openStartPointPositionDialog(item.code)"
                >位置校准</el-button
              >
              <el-button
                class="w-full !ml-0"
                @click="enterControl(item.code, item.type)"
                >进入操控端</el-button
              >
            </template>
            <template #reference>
              <div
                class="text-white cursor-pointer select-none p-3 bg-[#37424e] rounded text-sm font-bold flex justify-between mb-4"
                :class="{
                  '!text-[#5E6867]': isOffline(item.status),
                }"
                @click="selectActiveRobot(item.id, item.code)"
              >
                <div>{{ item.code }}</div>
                <div class="flex items-center">
                  <span
                    class="inline-block w-2 h-2 rounded-full mr-1 bg-[#20FEA5]"
                    :class="{
                      '!bg-[#5E6867]': isOffline(item.status),
                    }"
                  ></span>
                  <span>{{ item.status }}</span>
                </div>
              </div>
            </template>
          </el-popover>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
  &::after {
    height: 0;
  }
}
:deep(.el-tabs__item) {
  color: #fff;
  font-weight: bold;
}
:deep(.el-tabs__active-bar) {
  background-color: #007ebf;
}

.el-button + .el-button {
  margin-left: 0 !important;
}
</style>
